<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible=true">创建新项目</el-button>
    <div>
      <el-table :data="projects" stripe :default-sort="{prop: 'update_time', order: 'descending'}">
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="更新时间" prop="update_time" sortable></el-table-column>
        <el-table-column label="创建时间" prop="start_time" sortable></el-table-column>
        <el-table-column label="项目阶段" prop="stage"></el-table-column>
        <el-table-column label="操作" fixed="left" width="180">
          <template slot-scope="scope">
            <el-button type="primary" @click="checkInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="创建新项目" :visible.sync="dialogFormVisible">
      <el-form :model="addProject">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="addProject.name"></el-input>
        </el-form-item>
        <el-form-item label="项目简述" prop="content">
          <el-input v-model="addProject.content" type="textarea" :row="4" maxlength="300"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit();dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addproject, getprojectlist } from "@/api/table";

export default {
  data() {
    return {
      project: {
        name: null,
        content: null
      },
      dialogFormVisible: false,
      addProject: {
        name: null,
        content: null
      },
      projects: [],
      needfresh: false
    };
  },
  watch: {
    needfresh: function() {
      this.getProjects();
      this.needfresh = false;
    }
  },
  created() {
    this.getProjects();
  },
  methods: {
    addSubmit() {
      addproject(this.addProject).then(response => {
        if (response.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.needfresh = true;
        }
      });
    },
    getProjects() {
      getprojectlist().then(response => {
        this.projects = response.data;
      });
    },
    checkInfo(row) {
      this.$router.push({
        name: "Project_show",
        params: {
          project: row.name
        }
      });
    }
  }
};
</script>
